<template>
  <div class="clinic-details">
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      @submit.native.prevent
    >
      <el-form-item label="诊疗详情查询">
        <el-input
          placeholder="请输入标题查询相关内容"
          prefix-icon="el-icon-search"
          v-model="formInline.title"
           @keyup.enter.native="getDetails"
        >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleCreate">新增</el-button>
        <!-- <el-button type="primary" @click="getClinic" >查询</el-button> -->
      </el-form-item>
    </el-form>

    <el-table :data="detailsData" style="width: 100%">
      <el-table-column
        label="序号"
        type="index"
        :index="indexMethod"
        width="120"
      >
      </el-table-column>
      <el-table-column prop="clinic_title" label="诊疗项目名称">
      </el-table-column>
      <el-table-column prop="title" label="详情标题"> </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="content"
        label="详情内容"
      >
      </el-table-column>
      <el-table-column label="创建时间">
        <template v-solt="scope">
          <span>{{ moment(detailsData.time).format(`YYYY年MM月DD日`) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="90%">
      <el-form :model="form">
        <el-form-item label="标题" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="诊疗项目" :label-width="formLabelWidth">
          <el-select v-model="form.clinic_id" placeholder="请选择诊疗项目">
            <el-option v-for="item in clinicList" :key="item.clinic_id"  :label="item.clinic_title"  :value="item.clinic_id"></el-option>
            <!-- <el-option label="区域二" value="beijing"></el-option> -->
          </el-select>
        </el-form-item>
        <div>
          <p><span>诊疗详情编辑区</span></p>
          <tinymce v-model="form.content" :height="300" />
        </div>
      </el-form>
      <div  slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button  type="primary" @click="submitEdit()"
          >确 定</el-button
        >
      </div> 
    </el-dialog>
     <el-dialog :title="dialogTitle" :visible.sync="addFormVisible" width="90%">
      <el-form :model="form">
        <el-form-item label="标题" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="诊疗项目" :label-width="formLabelWidth">
          <el-select v-model="form.clinic_id" placeholder="请选择诊疗项目">
            <el-option v-for="item in clinicList" :key="item.clinic_id"  :label="item.clinic_title"  :value="item.clinic_id"></el-option>
            <!-- <el-option label="区域二" value="beijing"></el-option> -->
          </el-select>
        </el-form-item>
        <div>
          <p><span>诊疗详情编辑区</span></p>
          <tinymce v-model="form.content" :height="300" />
        </div>
      </el-form>
      <div  slot="footer" class="dialog-footer">
        <el-button @click="addFormVisible = false">取 消</el-button>
        <el-button  type="primary" @click="submitAdd()"
          >确 定</el-button
        >
      </div> 
    </el-dialog>


  </div>
</template>

<script>
import Tinymce from "@/components/Tinymce";
export default {
  name: "TinymceDemo",
  components: { Tinymce },
  data() {
    return {
      formInline: {
        title: "", //查询关键字
      },
      dialogFormVisible: false, //可视窗关闭
      addFormVisible: false, //可视窗关闭
      formLabelWidth: "100px", //弹框
      form: {
        //弹框内容
        title: "",
        clinic_id: "",
        content: "",
        details_id:'',
        time:''
      },
      detailsData: [], //详情数据
      clinicList:[],
      dialogTitle:''
    };
  },
  mounted() {
    this.getDetails();
    this.getClinicList()
  },
  methods: {
    getDetails() {
        let kw = "";
      if (this.formInline.title != "") {
        kw = "?title=" + this.formInline.title;
      }
      let url = `/clinicDetail/details${kw}`;
      this.axios.get(url).then((res) => {
        this.detailsData = res.data;
        console.log(this.detailsData);
      });
    },
    getClinicList(){
      let url=`/clinic/project`
      this.axios.get(url).then(res=>{
        this.clinicList=res.data
      })
    },
    submitAdd(){
      this.addFormVisible = false;
      console.log(111);
      let url = `/clinicDetail/addDetails`;
      this.form.time=this.moment(new Date()).format(`YYYY-MM-DD`)
      let params = this.form;
      this.axios.post(url, params).then((res) => {
        console.log(params);
        this.getDetails();
      });
      this.form = {};
    },
    submitEdit(){
      console.log(111);
      this.dialogFormVisible = false
      let url=`/clinicDetail/updateDetails`
      let params=this.form
      this.axios.post(url,params).then(res=>{
        // console.log(res);
        this.getDetails()
      })
    },

    indexMethod(index) {
      return index++ + 1;
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.dialogTitle='修改诊疗详情信息'
      this.form = {
        title:row.title,
        clinic_id: row.clinic_id,
        content:row.content,
        details_id:row.details_id,
        time:row.time
      };

      this.dialogFormVisible = true;
    },
    handleCreate(){
      this.dialogTitle='新增诊疗详情信息'
      this.addFormVisible = true;
      this.form={}
    },
    handleDelete(index, row) {
      console.log(index, row);
      let url = `/clinicDetail/${row.details_id}`;
      this.axios.get(url).then((res) => {
        this.getDetails();
      });
    },
  },
};
</script>

<style lang="scss">

</style>
